<script setup lang="ts">
import { onMounted, ref } from "vue";
import {
  FileItem,
  request_file_list,
  remove_file_from_list,
  download_file,
  remove_all_from_list,
} from "./download";
import { IconPark } from "@icon-park/vue-next/es/all";
import { onClickOutside } from "@vueuse/core";
import PopMenu from "../PopMenu.vue";
const item_list = ref<FileItem[]>([]);
const fill_list = (items: FileItem[]) => {
  while (item_list.value.length > 0) {
    item_list.value.pop();
  }
  items.forEach((item) => item_list.value.push(item));
};

onMounted(async () => {
  const items = await request_file_list(true);
  fill_list(items);
  console.log("Get file list, length:", item_list.value.length);
  // item_list.value.forEach((item) => console.log(item.formattedSize()));
  // console.dir(item_list.value[0]);
});

const page_pop_menu = ref<InstanceType<typeof PopMenu>>();

const refresh_list = async () => {
  close_page_menu();
  const items = await request_file_list(true, true);
  fill_list(items);
  console.log("Refresh file list, length:", item_list.value.length);
};

const open_page_menu = () => {
  page_pop_menu.value?.pop_in();
};

const close_page_menu = () => {
  page_pop_menu.value?.pop_out();
};

const close_item_menu = async () => {
  item_pop_menu.value?.pop_out();
  await item_pop_menu.value?.transition_promise;
  selectd_item.value = undefined;
};

const selectd_item = ref<FileItem>();

const open_item_menu = async (item: FileItem) => {
  item_pop_menu.value?.pop_out();
  await item_pop_menu.value?.transition_promise;
  selectd_item.value = item;
  item_pop_menu.value?.pop_in();
};

const item_pop_menu = ref<InstanceType<typeof PopMenu>>();

onClickOutside(item_pop_menu, () => {
  close_item_menu();
});

const remove_item = async () => {
  if (!selectd_item.value) {
    alert("No item selected!");
    return;
  }
  const choice = confirm("Sure to remove file:" + selectd_item.value.file_name);
  if (!choice) return;
  const res = await remove_file_from_list(selectd_item.value!.fid);
  if (res) {
    const removed_idx = item_list.value.indexOf(selectd_item.value!);
    item_list.value.splice(removed_idx, 1);
    close_item_menu();
  } else {
    alert("Remove file failed!");
  }
};

const remove_all = async () => {
  close_page_menu();
  const flag = await remove_all_from_list();
  if (flag) {
    item_list.value.length = 0;
  } else {
    alert("Remove all failed!");
  }
};
const download = () => {
  if (!selectd_item.value) {
    alert("No item selected!");
    return;
  }
  download_file(selectd_item.value!);
  item_pop_menu.value?.pop_out();
};
</script>

<template>
  <div class="container">
    <div class="container-header reverse">
      <h1 class="container-header text-shadow">Downloading</h1>
      <icon-park type="more-one" size="40px" @click="open_page_menu()"></icon-park>
    </div>
    <div class="item-list">
      <transition-group name="list" tag="div">
        <div
          class="file-item"
          v-for="(item, index) in item_list"
          @click="open_item_menu(item)"
          :key="index"
          :style="{ '--index': index }"
        >
          <div class="item-info reverse">
            <p class="item-name text-overflow">{{ item.file_name }}</p>
            <span class="item-size">{{ item.formattedSize() }}</span>
          </div>
        </div>
      </transition-group>
    </div>
    <PopMenu ref="item_pop_menu">
      <template #header>
        <h1 class="menu-header reverse">
          {{ selectd_item?.file_name ?? "No Selected File" }}
        </h1>
      </template>
      <template #menu-items>
        <span class="menu-item danger" @click="remove_item()">Remove From List</span>
        <span class="menu-item" @click="download()">Download</span>
      </template>
    </PopMenu>

    <PopMenu ref="page_pop_menu">
      <template #header>
        <h1 class="menu-header reverse">?</h1>
      </template>
      <template #menu-items>
        <span class="menu-item" @click="refresh_list()">Refresh List</span>
        <span class="menu-item danger" @click="remove_all()">Remove All</span>
        <span class="menu-item" @click="">Back</span>
      </template>
    </PopMenu>
  </div>
</template>

<style lang="scss" scoped>
.container {
  display: grid;
  grid-template-rows: auto 1fr;
}
.container-header {
  display: grid;
  grid-template-columns: 1fr auto;
}
.item-list {
  display: flex;
  flex-direction: column;
}
.item-info {
  display: grid;
  grid-template-columns: 1fr 80px;
  box-shadow: 1px 1px 1px 1px #999;
  margin-top: 10px;
  font-size: 20px;
  gap: 10px;
}
.item-name {
  padding-left: 5px;
}
.item-size {
  text-align: right;
}
.menu-header {
  width: 100%;
  text-align: center;
  font-size: 20px;
  // height: 26px;
  // word-wrap: break-word;
  word-break: break-all;
  padding: 0 5px;
}
.menu-item {
  font-size: 18px;
  font-weight: 600;
  padding: 5px 0;
}
.menu-item::before {
  content: "▶";
}
.menu-item.danger {
  background-color: var(--danger-color);
  color: var(--bg-color);
  text-shadow: 1px 1px rgb(68, 68, 68);
}
.list-enter-active,
.list-leave-active {
  transition: all 0.3s ease-in-out calc(var(--index) * 0.1s);
}
.list-enter,
.list-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}
.list-enter-to,
.list-leave {
  opacity: 1;
  transform: translateX(0);
}
</style>
